<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            padding: 8px;
        }

        .list {
            margin-top: 10px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            border: 1px dashed #333;
        }

        .list li+li {
            /* border-top: 0; */
        }

        button {
            padding: 2px 10px;
        }

        .slide {
            margin-top: 10px;
            width: 1100px;
            height: 600px;
            border: 1px solid #333;
            margin-top: 10px;
            position: relative;
        }

        .slide .box {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <button>start</button>
        <button class="stop">stop(false,false)</button>
        <button class="stop">stop(false,true)</button>
        <button class="stop">stop(true,true)</button>
        <button class="stop">stop(true,false)</button>
        <button class="finish">finish</button>
        <div class="slide">
            <div class="box"></div>
        </div>
    </div>
</body>
<script>

    // animate()  jquery 运动
    // $(ele).animate(params,speed,callback)

    // ele       运动的元素
    // params    运动的css属性及其终点值 {left:1000,top:500}
    // speed     1. 速度相关的单词 slow normal fast   2. 运动的时间(单位ms)
    // callback  本地运动到达终点时执行的回调函数

    // jquery的链式操作  => 实现多链式运动
    // 运动队列: [{ left: 1000 },{ top: 500 },{ left: 0 },{ top: 0 }]

    // stop(clearQueue,jumpToEnd)    停止所有在指定元素上正在运行的动画。

    // clearQueue: 是否清空队列(默认false)
    //      true:  清空队列 => 暂停当前动画,后续队列也不执行
    //      false: 不清空队列 => 暂停当前动画,转去执行后续队列的动画

    // jumpToEnd:  当前正在执行的动画是否立即完成(被暂停当前动画->是停留在原位置 还是立即到达本次动画的终点  默认false)
    //       true: 立即到达本次动画的终点(会执行animate()中的回调函数)
    //       false:不立即到达本次动画的终点 (停留在当前位置 => 不会执行animate()中的回调函数)

    // finish()  停止当前正在运行的动画，删除所有排队的动画，并完成匹配元素所有的动画。


    $("button").eq(0).click(function () {
        $(".box").animate({ left: 1000 }, 2000, function () {
            console.log("left:1000!");
        }).animate({ top: 500 }, 1000, function () {
            console.log("top: 500 !");
        }).animate({ left: 0 }, 2000, function () {
            console.log("left: 0 !");
        }).animate({ top: 0 }, 1000, function () {
            console.log("top: 0 !");
        })
    })


    $(".stop").eq(0).click(function () {
        // stop(false,false)
        // false: 不清空队列 => 暂停当前动画,转去执行后续队列的动画
        // false:  不立即到达本次动画的终点 停留在当前位置

        // 停留在当前位置, 转去执行后续队列的动画  => 由当前位置开始执行后续动画

        $(".box").stop(false, false);
    })

    $(".stop").eq(1).click(function () {
        // stop(false,true)
        // false: 不清空队列 => 暂停当前动画,转去执行后续队列的动画
        // true:  立即到达本次动画的终点 

        // 暂停当前动画,立即到达本次动画的终点, 转去执行后续队列的动画

        $(".box").stop(false, true);
    })
    $(".stop").eq(2).click(function () {
        // stop(true,true)
        // true: 清空队列 => 暂停当前动画,后续队列也不执行
        // true: 立即到达本次动画的终点 

        // 暂停当前动画,立即到达本次动画的终点, 后续队列也不执行

        $(".box").stop(true, true);
    })
    $(".stop").eq(3).click(function () {
        // stop(true,false)
        // true: 清空队列 => 暂停当前动画,后续队列也不执行
        // false: 不立即到达本次动画的终点 停留在当前位置

        // 暂停当前动画,停留在当前位置, 后续队列也不执行

        $(".box").stop(true, false);
    })

    $(".finish").click(function () {
        $(".box").finish();
    })
</script>

</html>